import React from 'react'
import {withRouter} from 'react-router';
import {Route, BrowserRouter, Link} from 'react-router-dom'

const Index = ()=> {
    return <div>Index</div>
}

class RenderComponent extends React.Component {

    render() {
        return <div>
            I'm the subclass of React.Component.
        </div>
    }
}

const About = ()=> {
    return <div>About</div>
}

const BasicApp = ()=> {
    return <BrowserRouter basename="course01">
        <div>
            <ul>
                <li><Link to="/">Index</Link></li>
                <li><Link to="/render">Render</Link></li>
                <li><Link to="/render2">Render2</Link></li>
                <li><Link to="/about">About</Link></li>
            </ul>
            <Route path="/" exact component={Index}></Route>
            <Route path="/render" render={()=>(<div>I'm defined by render.</div>)}></Route>
            <Route path="/render2" render={()=>(<div><RenderComponent /></div>)}></Route>
            <Route path="/about" component={About}></Route>
        </div>
    </BrowserRouter>
}
export default BasicApp

// 定义组件还可以使用 Route 的 render 属性; render 可以直接返回 html 片段,也可以是 Component 组件;
